<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
           <meta name="author" content="Zhang Cheng">
		<title></title>
		<script src="js/vue.js" ></script>
	</head>
	<body>
		<div id="app">
			<!--
            	作者：offline
            	时间：2019-08-23
            	描述：迭代普通数组
            -->
            <p v-for="(item,i) in list">索引值：{{i}} 输出项：{{item}}</p>
            <br /><br />
            
            <!--
            	作者：offline
            	时间：2019-08-23
            	描述：迭代对象数组
            -->
            <p v-for="(item,i) in jsonlist">索引值：{{item.id}} 输出项：{{item.name}}</p>
              
            <br /><br />
            
            
            
             <!--
            	作者：offline
            	时间：2019-08-23
            	描述：迭代对象的键值对的时候出了 value 和 key 在第三个位置还有 索引
            -->
            <p v-for="(value,key,i) in user">值是：{{value}} 键是：{{key}} 索引是：{{i}}</p>
            <br /><br />
           
            
             <!--
            	作者：offline
            	时间：2019-08-23
            	描述：迭代数字 使用v-for 迭代数字的时候其计数 是从1开始
            -->
          <p v-for="count in 10">这是第 {{count}} 次循环</p>
          
          
          
          
           <!--
            	作者：offline
            	时间：2019-08-23
            	描述：使用v-for时在组件开发过程中必须使用Key 来使其记住某个状态。key 只接受一些num/string的参数
            -->
		</div>
		<script>
			var app = new Vue({
				el:'#app',
				data:{
					list:[1,2,3,4,5,6,7],
					jsonlist:[{id:'1',name:"zha1"},{id:'2',name:"zha2"},{id:'3',name:"zha3"}],
					user:{
						id:1,
						name:'tony',
						gender:"男"
					},
					
				},
				methods:{
					
				}
			});
		</script>
	</body>
</html>